import type { ImageProps } from 'antd-mobile/es/components/image'
import type { ImageViewerProps } from 'antd-mobile/es/components/image-viewer'
import { Image, ImageViewer } from 'antd-mobile'
import { asserts, isEmpty } from '@/utils/share'
import { useState } from 'react'
import { getHttpSuffix } from './map'
import IconPdf from '@/static/fileType/icon_pdf.png'
import styles from './index.module.less'
import { downloadFile } from '../../../utils/downloadFile'

interface Props {
    /** 图片路径 */
    src?: string | string[]
    width?: number
    height?: number
    image?: Omit<ImageProps, 'src'>
    preview?: ImageViewerProps
    className?: string
    style?: React.CSSProperties
}

/** 图片展示 */
const Picture = (props: Props) => {
    /** 是否显示图片预览 */
    const [visiblePreview, setVisiblePreview] = useState(false)
    /** 当前预览数组下标 */
    const [indexPreview, setIndexPreview] = useState(0)

    if (isEmpty(props.src, true) || asserts.isUndefined(props.src)) return null

    /** 转换成数组 */
    const srcList = asserts.isArray(props.src) ? props.src : [props.src]

    const onClickImg = (index: number) => {
        setVisiblePreview(true)
        setIndexPreview(index)
    }

    const imageStyle = {
        height: props.height ?? 'auto',
        width: props.width ?? 'auto',
    }

    return (
        <div className={`${styles.picture} ${props.className}`} style={props.style}>
            {/* 图片列表 */}
            {srcList.map((src, i) => {
                const suffix = getHttpSuffix(src)

                switch (suffix) {
                    case 'pdf':
                        return (
                            <Image
                                className={styles.picture_image}
                                style={imageStyle}
                                key={src}
                                {...props.image}
                                src={IconPdf}
                                onClick={() => {
                                    downloadFile(src, 'pdf文件')
                                }}
                            />
                        )

                    case 'zip': {
                        return <div>zip 该格式暂不支持预览，如需查阅可去PC端查看</div>
                    }

                    default: {
                        return (
                            <Image
                                className={styles.picture_image}
                                style={imageStyle}
                                key={src}
                                {...props.image}
                                src={src}
                                onClick={() => onClickImg(i)}
                            />
                        )
                    }
                }
            })}

            {/* 预览 */}
            <ImageViewer.Multi
                images={srcList}
                visible={visiblePreview}
                defaultIndex={indexPreview}
                onClose={() => {
                    setVisiblePreview(false)
                }}
                {...props.preview}
            />
        </div>
    )
}

export default Picture
